<template>
    <div class="login acea-row row-middle row-center">
        <div class="nav acea-row row-between-wrapper">
            <div class="login-icon"></div>
            <div class="from-nav acea-row row-column row-middle row-center">
                <div class="title">AI旧物回收系统</div>
                <Form ref="formInline" :model="formInline" :rules="ruleInline" @keyup.enter="handleSubmit('formInline')">
                    <div class="name">用户名</div>
                    <FormItem prop="username">
                        <Input
                                type="text"
                                v-model="formInline.username"
                                placeholder="请输入用户名"
                                size="large"
                                class="input"
                        />
                    </FormItem>
                    <div class="name">密码</div>
                    <FormItem prop="password">
                        <Input
                                type="password"
                                v-model="formInline.password"
                                placeholder="请输入密码"
                                size="large"
                        />
                    </FormItem>
                    <FormItem>
                        <Button type="primary" long :loading="loading" size="large" @click="handleSubmit('formInline')" class="btn"
                        >登录</Button
                        >
                    </FormItem>
                </Form>
            </div>
        </div>
    </div>
</template>

<script>
    import { AccountLogin, loginInfoApi } from "@/api/account";
    // import mixins from '../mixins'
    import Setting from "@/setting";
    import { setCookies } from "@/libs/util";
    export default {
        name: "Index",
        data(){
            return {
                screenWidth:'',
                timer:'',
                formInline:{
                    username:'',
                    password:'',
                },
                ruleInline: {
                    username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
                    password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
                },
                loading: false,
                jigsaw: null,
                errorNum: 0,
            }
        },
        created() {
            var _this = this;
            top != window && (top.location.href = location.href);
            document.onkeydown = function (e) {
                if (_this.$route.name === "login") {
                    let key = window.event.keyCode;
                    if (key === 13) {
                        _this.handleSubmit("formInline");
                    }
                }
            };
            window.addEventListener("resize", this.handleResize);
        },
        watch: {
            fullWidth(val) {
                // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
                if (!this.timer) {
                    // 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
                    this.screenWidth = val;
                    this.timer = true;
                    let that = this;
                    setTimeout(function () {
                        // 打印screenWidth变化的值
                        that.timer = false;
                    }, 400);
                }
            },
            $route(n) {
                this.captchas();
            },
        },
        mounted() {

            this.$nextTick(() => {
                // /* eslint-disable */
                let that = this;
                if (this.screenWidth < 768) {
                    document.getElementsByTagName('canvas')[0].removeAttribute('class', 'index_bg');
                } else {
                    document.getElementsByTagName('canvas')[0].className = 'index_bg';
                }
            });
        },
        methods:{
            getExpiresTime(expiresTime) {
                let nowTimeNum = Math.round(new Date() / 1000);
                let expiresTimeNum = expiresTime - nowTimeNum;
                return parseFloat(parseFloat(parseFloat(expiresTimeNum / 60) / 60) / 24);
            },
            captchas: function () {
                this.imgcode =
                    Setting.apiBaseURL + "/captcha_pro?" + Date.parse(new Date());
            },
            // 关闭模态框
            closeModel() {
                let msg = this.$Message.loading({
                    content: "登录中...",
                    duration: 0,
                });
                this.loading = true;
                AccountLogin({
                    account: this.formInline.username,
                    pwd: this.formInline.password,
                    imgcode: this.formInline.code,
                })
                    .then(async (res) => {
                        msg();
                        let data = res.data;
                        let expires = this.getExpiresTime(data.expires_time);
                        // 记录用户登陆信息
                        setCookies("uuid", data.user_info.id, expires);
                        setCookies("token", data.token, expires);
                        setCookies("expires_time", data.expires_time, expires);
                        setCookies('defaultMerchantId','');

                        this.$store.commit("userInfo/uniqueAuth", data.unique_auth);
                        this.$store.commit("userInfo/userInfo", data.user_info);
                        // console.log('userinfo',this.$store.state.userInfo.userInfo)
                        // 保存菜单信息
                        // this.$store.commit("menus/setopenMenus", []);
                        // this.$store.commit("menus/getmenusNav", data.menus);

                        // 记录用户信息
                        this.$store.commit("userInfo/name", data.user_info.account);
                        this.$store.commit("userInfo/avatar", data.user_info.head_pic);
                        this.$store.commit("userInfo/access", data.unique_auth);
                        this.$store.commit("userInfo/logo", data.logo);
                        this.$store.commit("userInfo/logoSmall", data.logo_square);
                        this.$store.commit("userInfo/version", data.version);
                        this.$store.commit(
                            "userInfo/newOrderAudioLink",
                            data.newOrderAudioLink
                        );

                        if (this.jigsaw) this.jigsaw.reset();

                        return this.$router.replace({ path: "/home/home" || "/home" });
                    })
                    .catch((res) => {
                        msg();
                        this.formInline.code = "";
                        let data = res === undefined ? {} : res;
                        this.errorNum++;
                        this.captchas();
                        this.$Message.error(data.msg || "登录失败");
                        if (this.jigsaw) this.jigsaw.reset();
                    });
                setTimeout((e) => {
                    this.loading = false;
                }, 1000);
            },
            handleSubmit(name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        if (this.errorNum >= 2) {
                            this.modals = true;
                        } else {
                            this.closeModel();
                        }
                    }
                });
            },
        }
    }
</script>

<style scoped lang="less">
    .login{
        width: 100vw;
        height: 100vh;
        background-image: url("https://airecoveryproject.oss-cn-hangzhou.aliyuncs.com/pic/login-bg.png");
        background-size: 100% 100%;

        .nav{
            width: 1000px;
            height: 500px;
            box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.08),0px 2px 6px 0px rgba(0, 0, 0, 0.06),0px 4px 8px 2px rgba(0, 0, 0, 0.04);
            background: #FFFFFF;
            border-radius: 10px;

            .login-icon{
                width: 500px;
                height: 414px;
                background-image: url("https://airecoveryproject.oss-cn-hangzhou.aliyuncs.com/pic/login-icon.png");
                background-size: 100% 100%;
            }

            .from-nav{
                width: 500px;
                height: 400px;

                .title{
                    font-size: 30px;
                    font-weight: bold;
                    color: #333;
                    margin-bottom: 30px;
                }
                .name{
                    font-size: 16px;
                    color: #000;
                    margin: 10px 0;
                }
                .input{
                    width: 300px;
                }

            }

        }


    }
</style>
